<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01 请求本地纯文本</title>
</head>
<body>
  <button id="btn">请求本地纯文本</button>

  <script>
    document.getElementById('btn').addEventListener("click", loadText);

    function loadText() {
      var xhr = new XMLHttpRequest();
      // open(type, url/file, async), async表示是否要异步加载
      xhr.open('GET', '../data/user.txt', true);

      console.log("READSTATE: ", xhr.readyState);

      // 两种方式请求：onload / onreadystatechange
      
      // xhr.onload = function() {
      //   console.log(this.responseText);
      // }

      xhr.onreadystatechange = function() {
        console.log("READSTATE: ", xhr.readyState);
        console.log(this.responseText);
      }

      // 发送请求
      xhr.send();
    }


    // readyState 状态码：
		//  0：请求未初始化
		//  1：服务器连接已建立
		//  2：请求已接收
		//  3：请求处理中
		//  4：请求已完成，且响应已就绪

    // HTTP  status 状态码：
		//  200：服务器成功返回网页
		//  404：请求的网页不存在
		//  503：服务器暂时不可用

  </script>
  

  
</body>
</html>